<template>
  <div class="change-handler">
    <Button type="primary" @click="handleClick">人员变更</Button>
    <el-dialog :visible.sync="visible" title="人员变更" append-to-body @open="handleOpen" @close="handleClose">
      <div>
        <AddEdit text="新增" :work-order-ids="workOrderIds" @refresh="refreshTableData"></AddEdit>
        <AddEdit is-edit :row="row" :work-order-ids="workOrderIds" text="变更" @refresh="refreshTableData"></AddEdit>
        <Button type="primary" @click="handleRemove">删除</Button>
      </div>
      <table-box ref="tableBox" :table-config="tableConfig" :table-height="300" :data="tableData" :selected-arry.sync="rows" no-request></table-box>
    </el-dialog>
  </div>
</template>
<script>
import { changeHandlerQuery, changeHandlerDel } from '@/api/workOrder'
import AddEdit from './AddEdit'
export default {
  name: 'ChangeHandler',
  components: {
    AddEdit
  },
  props: {
    selectedArry: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      tableData: [],
      selection: null,
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            label: '用户名',
            prop: 'handler'
          },
          {
            label: '业务组',
            prop: 'handlerGroupName'
          },
          {
            label: '岗位',
            prop: 'handlerPostName'
          },
          {
            label: '用户姓名',
            prop: 'handlerName'
          }
        ]
      },
      rows: []
    }
  },
  computed: {
    row() {
      return this.rows && this.rows.length > 0 ? this.rows[0] : undefined
    },
    workOrderIds() {
      return this.selectedArry.map(e => e.id)
    }
  },
  methods: {
    handleClick() {
      if (this.selectedArry.length === 0) {
        this.$message.warning('请选择要操作的数据!')
        this.visible = false
      } else {
        this.visible = true
      }
    },
    getTableData() {
      changeHandlerQuery(this.workOrderIds).then(res => {
        this.tableData = res.data
      })
    },
    refreshTableData() {
      this.tableData = []
      this.rows = []
      this.getTableData()
    },
    handleOpen() {
      this.getTableData()
    },
    handleClose() {
      this.tableData = []
    },
    handleRemove() {
      if (this.selectedArry.length === 0) {
        this.$message.warning('请选择要操作的数据!')
        return
      }
      const data = {
        oldHandler: this.row.handler,
        workOrderIds: this.workOrderIds
      }
      return changeHandlerDel(data).then(res => {
        this.$message.success('删除成功!')
        this.refreshTableData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.change-handler{
  text-align: left;
  display: inline-block;
  margin-right: 5px;
}
</style>
